<template>
	<view class="demo-slider-range">
		<view class="slider-item">
			<slider-range :value="slider1.rangeValue" :min="slider1.min" :max="slider1.max" :step="slider1.step"
				:bar-height="barHeight" :block-size="blockSize" :background-color="backgroundColor" :format="format1"
				@change="handleRangeChange"></slider-range>
		</view>
	</view>
</template>

<script>
	import SliderRange from '../../components/primewind-sliderrange/index.vue'
	export default {
		components: {
			SliderRange,
		},
		data() {
			return {
				barHeight: 3,
				blockSize: 26,
				backgroundColor: '#EEEEF6',
				slider1: {
					min: 50,
					max: 200,
					step: 10,
					rangeValue: [50, 150],
				},

			}
		},
		methods: {
			format1(val) {
				return val
			},
			format2(val) {
				return `${val}%`
			},
			handleRangeChange(e) {
				this.rangeValue = e
			},
		},
	}
</script>
<style>
	.demo-slider-range {
		background-color: #fff;
	}

	.section-title {
		padding: 0 0 20rpx;
		color: #666;
	}

	.slider-item:not(:last-child) {
		margin-bottom: 100rpx;
	}
</style>